<!-- 用户详情弹框 -->
<template>
  <div class="userinfo-box">

    <div class="dis-flex" style="position: relative;">
      <div class="avatar">
        <img src="@/assets/images/avatar.png" alt="">
      </div>
      <div class="account">
        <div class="username">微信用户9527</div>
        <div class="account-item">微信号：9527</div>
        <div class="account-item">地区：江苏 连云港</div>
      </div>

      <n-popover trigger="click" class="custom-popover">
        <template #trigger>
          <n-button quaternary style="position: absolute;right: 0;top: 0;" title="更多">
            <svg-icon name="more-point" />
          </n-button>
        </template>
        <button-menu />
      </n-popover>
    </div>

    <n-divider />

    <div class="dis-flex alc">
      <div class="form-label">备注</div>
      <div class="imgList">不吃香菜</div>
    </div>

    <n-divider />

    <div class="dis-flex alc">
      <div class="form-label">来源</div>
      <div class="imgList">通过扫一扫添加</div>
    </div>

    <n-divider />

    <n-grid :cols="8">
      <n-gi :offset="1" :span="2">
        <icon-button-vertical title="发消息">
          <svg-icon name="wx-msg-line" :size="22" />
        </icon-button-vertical>
      </n-gi>
      <n-gi :span="2">
        <icon-button-vertical title="语音聊天">
          <svg-icon name="call" :size="22" />
        </icon-button-vertical>
      </n-gi>
      <n-gi :span="2">
        <icon-button-vertical title="视频聊天">
          <svg-icon name="video" :size="22" />
        </icon-button-vertical>
      </n-gi>
    </n-grid>
  </div>
</template>

<script setup>
import IconButtonVertical from "@/components/IconButtonVertical.vue";
import ButtonMenu from './buttonMenu.vue';

</script>

<style lang="scss" scoped>
.userinfo-box {
  width: 360px;
  margin: 20px auto 0;
}
.avatar img {
  width: 58px;
  height: 58px;
  border-radius: 4px;
}
.account {
  margin-left: 12px;
  .username {
    font-size: 16px;
  }
  .account-item {
    line-height: 20px;
    font-size: 12px;
    color: #999;
  }
}

.form-label {
  color: #999999;
  width: 60px;
}
</style>
